<template>
  <div class="scoped-slot-demo">
    <h2>用户列表（作用域插槽）</h2>
    <!-- 作用域插槽：将子组件的数据传递给父组件 -->
    <slot 
      :users="users" 
      :formatUser="formatUser"
    >
      <!-- 默认渲染 -->
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
    </slot>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const users = ref([
  { id: 1, name: '张三', age: 25, role: '前端开发' },
  { id: 2, name: '李四', age: 30, role: '后端开发' },
  { id: 3, name: '王五', age: 28, role: '产品经理' }
])

const formatUser = (user) => {
  return `${user.name} (${user.age}岁, ${user.role})`
}
</script>

<style scoped>
.scoped-slot-demo {
  border: 1px solid #999;
  padding: 15px;
  margin: 10px 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 5px 0;
  padding: 5px;
  background-color: #f0f0f0;
}
</style>
